<template>
  <div class="app-container">
    <zl-table ref="table" url="/sys/datasource/list" :param.sync="par">
      <template slot="search">
        <el-form :inline="true" :model="par" class="left">
          <el-form-item label="数据源名称">
            <el-input v-model="par.dataSourceName" clearable placeholder="请输入" />
          </el-form-item>

          <el-form-item>
            <el-button icon="el-icon-search" type="primary" size="small" @click="query">搜 索</el-button>
          </el-form-item>
        </el-form>
      </template>
      <template slot="toolbar">
        <el-row :gutter="10">
          <el-col :span="1.5">
            <el-button size="small" plain type="primary" icon="el-icon-plus" @click="addData">新 增</el-button>
          </el-col>
        </el-row>
      </template>
      <template slot="cols">
        <el-table-column align="center" width="50px" type="index" :index="indexMethod" />
        <el-table-column width="150px" prop="sourceName" label="数据源名称" align="center" show-overflow-tooltip sortable="custom" />
        <el-table-column prop="driverClassName" label="驱动类" width="200px" align="center" show-overflow-tooltip sortable="custom" />
        <el-table-column prop="username" label="用户名" min-width="150px" align="center" show-overflow-tooltip sortable="custom"/>
<!--        <el-table-column prop="password" label="密码" min-width="150px" align="center" show-overflow-tooltip />-->
        <el-table-column prop="url" label="数据源URL" min-width="250px" show-overflow-tooltip sortable="custom"/>
        <el-table-column align="center" label="操作" width="150px">
          <template slot-scope="scope">
            <el-button
              title="编辑"
              type="primary"
              circle
              plain
              class="el-icon-edit"
              size="mini"
              @click.native.prevent="editRow(scope.$index, scope.row)"
            />
            <el-button
              title="删除"
              type="danger"
              circle
              plain
              class="el-icon-delete"
              size="mini"
              @click.native.prevent="deleteRow(scope.$index, scope.row)"
            />
          </template>
        </el-table-column>
      </template>
    </zl-table>
    <el-dialog :title="title" :visible.sync="show" :append-to-body="true" :close-on-click-modal="false" width="850px">
      <el-form ref="editForm" :model="form" :rules="rules" label-width="180px" style="max-height:500px;overflow:auto">
        <el-collapse v-model="activeNames">
          <el-collapse-item title="基础配置" name="1">
            <el-row>
              <el-col :span="12">
                <el-form-item label="数据源名称" prop="sourceName" class="is-required">
                  <el-input v-model="form.sourceName" clearable autocomplete="off" maxlength="50" placeholder="请输入数据源名称"/>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="数据源驱动类" prop="driverClassName" class="is-required">
                  <el-select v-model="form.driverClassName" placeholder="请选择" class="w100">
                    <el-option v-for="(o,i) in driverClassNames" :label="o.label" :value="o.value" :key="i"/>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="用户名" prop="username" class="is-required">
                  <el-input v-model="form.username"  clearable autocomplete="off" placeholder="请输入用户名"/>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="密码" prop="password" class="is-required">
                  <el-input v-model="form.password"  clearable autocomplete="off" placeholder="请输入密码" type="password"/>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="数据源URL" prop="url" class="is-required">
                  <el-input v-model="form.url"  clearable autocomplete="off" placeholder="请输入数据源URL"/>
                </el-form-item>
              </el-col>
            </el-row>
          </el-collapse-item>
          <el-collapse-item title="其他配置" name="2">
            <el-row>
              <el-col :span="12">
                <el-form-item label="初始化连接数" prop="initialSize">
                  <el-input-number v-model="form.initialSize" :min="0" :max="20"  clearable autocomplete="off" placeholder="请输入初始化连接数"/>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="最大活动连接数" prop="maxActive">
                  <el-input-number v-model="form.maxActive" :min="10" :max="50"  clearable autocomplete="off" placeholder="请输入最大活动连接数"/>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="最大空闲连接数" prop="maxIdle">
                  <el-input-number v-model="form.maxIdle" :min="5" :max="10"  clearable autocomplete="off" placeholder="请输入最大空闲连接数"/>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="最小空闲连接数" prop="minIdle">
                  <el-input-number v-model="form.minIdle" :min="0" :max="5"  clearable autocomplete="off" placeholder="请输入最小空闲连接数"/>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="最大等待时间" prop="maxWait">
                  <el-input-number v-model="form.maxWait" :min="1000" :max="10000"  clearable autocomplete="off" placeholder="请输入最大等待时间"/>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label="验证sql" prop="sqlSelect" class="is-required">
                  <el-input type="textarea" :autosize="{minRows:5}" v-model="form.sqlSelect" :min="-1" :max="10000"  clearable autocomplete="off" placeholder="请输入验证sql"/>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="连接前检查" prop="testOnBorrow">
                  <el-radio-group v-model="form.testOnBorrow">
                    <el-radio :label="true">是</el-radio>
                    <el-radio :label="false">否</el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="归还连接前检查" prop="testOnReturn">
                  <el-radio-group v-model="form.testOnReturn">
                    <el-radio :label="true">是</el-radio>
                    <el-radio :label="false">否</el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="开启空闲回收器检验" prop="testWhileIdle">
                  <el-radio-group v-model="form.testWhileIdle">
                    <el-radio :label="true">是</el-radio>
                    <el-radio :label="false">否</el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="空闲连接回收器休眠时间" prop="timeBetweenEvictionRunsMillis">
                  <el-input-number v-model="form.timeBetweenEvictionRunsMillis" :min="-1" :max="10000"  clearable autocomplete="off" placeholder="请输入空闲连接回收器休眠时间"/>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="空闲连接回收检查数" prop="numTestsPerEvictionRun">
                  <el-input-number v-model="form.numTestsPerEvictionRun" :min="0" :max="10"  clearable autocomplete="off" placeholder="请输入空闲连接回收检查数"/>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="保持空闲最小时间值" prop="minEvictableIdleTimeMillis">
                  <el-input-number v-model="form.minEvictableIdleTimeMillis" :min="-1" :max="10000"  clearable autocomplete="off" placeholder="请输入保持空闲最小时间值"/>
                </el-form-item>
              </el-col>
            </el-row>
          </el-collapse-item>
        </el-collapse>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" type="primary" :loading="loading" @click="saveData">保 存</el-button>
        <el-button size="small" @click="show = false">取 消</el-button>
      </div>
    </el-dialog>
  </div>

</template>

<script>
const driverClassNames = [
  { value: 'oracle.jdbc.OracleDriver', label: 'oracle.jdbc.OracleDriver' },
  { value: 'com.mysql.jdbc.Driver', label: 'com.mysql.jdbc.Driver' },
  { value: 'dm.jdbc.driver.DmDriver', label: 'dm.jdbc.driver.DmDriver' }
]
import { validator,fastNotBlank } from '@/utils/form'
import {saveDatasource,deleteDatasource} from '@/api/datasource'
import ZlTable from '@/components/table/table-con'
export default {
  name: 'Datasource',
  components: { ZlTable },
  data() {
    return {
      activeNames:['1'],
      par: {
        dataSourceName: '',
        name: ''
      },
      driverClassNames: driverClassNames,
      modules: [],
      form: {
        id: '',
        sourceName: '',
        driverClassName: '',
        username: '',
        password: '',
        url: '',

        initialSize: 0, // 初始化连接数
        maxActive: 50, // 最大活动连接数
        maxIdle: 10, // 最大空闲连接数
        minIdle: 0, // 最小空闲连接数
        maxWait: 10000, // 最大等待时间
        sqlSelect: '', // SQL验证查询
        testOnBorrow: true, // 获取连接前检验
        testOnReturn: true, // 归还连接前检验
        testWhileIdle: false, // 开启空闲回收器检验
        timeBetweenEvictionRunsMillis: -1, // 空闲连接回收器休眠时间
        numTestsPerEvictionRun: 3, // 空闲连接回收检查数
        minEvictableIdleTimeMillis: 1800// 保持空闲最小时间
      },
      showPwd: "password",
      title: '修改数据源',
      add: false,
      loading: false,
      show: false,
      showEncrypt: false,
      labelWidth: '80px'
    }
  },
  computed: {
    rules() {
      return {
        sourceName: [fastNotBlank('数据源名称不能为空')],
        driverClassName: [fastNotBlank('数据源驱动类不能为空')],
        username: [fastNotBlank('用户名不能为空')],
        password: [fastNotBlank('密码不能为空')],
        url: [fastNotBlank('数据源URL不能为空')],
        sqlSelect: [fastNotBlank('验证sql不能为空')],
      }
    }
  },
  mounted() {

  },
  methods: {
    saveData() {
      this.$refs.editForm.validate(r => {
        if (r) {
          this.loading = true
          saveDatasource(this.form).then((r) => {
            this.$message.success('保存成功')
            this.loading = false
            this.show = false
            this.query()
          }).catch(() => {
            this.loading = false
          })
        }
      })
    },
    deleteRow(index, row) {
      this.$confirm('是否删除数据源?', '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteUser(row.sourceName).then((result) => {
          this.$message.success('删除成功')
          this.query()
        })
      })
    },
    addData() {
      this.title = '新增数据源'
      this.show = true
      this.initForm()
      this.$nextTick(() => {
        this.$refs.editForm.clearValidate()
      })
    },
    editRow(index, row) {
      this.title = '修改数据源'
      console.log(row)
      this.form.id = row.id
      this.form.sourceName = row.sourceName
      this.form.driverClassName = row.driverClassName
      this.form.username = row.username
      this.form.password = row.password
      this.form.url = row.url
      this.form.initialSize = row.initialSize
      this.form.maxActive = row.maxActive
      this.form.maxIdle = row.maxIdle
      this.form.minIdle = row.minIdle
      this.form.maxWait = row.maxWait
      this.form.sqlSelect = row.sqlSelect
      this.form.testOnBorrow = row.testOnBorrow == 'true'
      this.form.testOnReturn = row.testOnReturn == 'true'
      this.form.testWhileIdle = row.testWhileIdle == 'true'
      this.form.timeBetweenEvictionRunsMillis = row.timeBetweenEvictionRunsMillis
      this.form.numTestsPerEvictionRun = row.numTestsPerEvictionRun
      this.form.minEvictableIdleTimeMillis = row.minEvictableIdleTimeMillis
      this.show = true
      this.$nextTick(() => {
        this.$refs.editForm.clearValidate()
      })
    },
    initForm(){
      this.form.id = ''
      this.form.sourceName = ''
      this.form.driverClassName = ''
      this.form.username = ''
      this.form.password = ''
      this.form.url = ''
      this.form.initialSize = 0
      this.form.maxActive = 50
      this.form.maxIdle = 10
      this.form.minIdle = 0
      this.form.maxWait = 10000
      this.form.sqlSelect = ''
      this.form.testOnBorrow = true
      this.form.testOnReturn = true
      this.form.testWhileIdle = false
      this.form.timeBetweenEvictionRunsMillis = -1
      this.form.numTestsPerEvictionRun = 3
      this.form.minEvictableIdleTimeMillis = 1800
    },
    query() {
      this.$refs.table.query()
    },
    indexMethod(index) {
      return (this.$refs.table.pageNum - 1) * this.$refs.table.pageSize + index + 1
    }
  }
}
</script>
<style scoped>

</style>
